{extend name="layouts/main" /}
{block name="link"}{/block}
{block name="css"}
<style>
	.ibox {
		clear: both;
		margin-bottom: 25px;
		margin-top: 0;
		padding: 0;
	}
	.ibox-title {
		background-color: #ffffff;
		border-color: #e7eaec;
		border-image: none;
		border-style: solid solid none;
		border-width: 4px 0px 0;
		color: inherit;
		margin-bottom: 0;
		padding: 14px 15px 7px;
		min-height: 48px;
	}
	.ibox-content {
		background-color: #ffffff;
		color: inherit;
		padding: 15px 20px 20px 20px;
		border-color: #e7eaec;
		border-image: none;
		border-style: solid solid none;
		border-width: 1px 0px;
	}
	.float-e-margins .btn {
		margin-bottom: 5px;
	}
	.btn-info {
		background-color: #23c6c8;
		border-color: #23c6c8;
		color: #FFFFFF;
	}
	.btn-org {
		color: #fff;
		background-color: #F39800;
		border-color: #F39800;
	}
	.btn {
		border-radius: 3px;
	}
	.btn {
		display: inline-block;
		padding: 6px 12px;
		font-size: 14px;
		font-weight: 400;
		line-height: 1.42857143;
		text-align: center;
		white-space: nowrap;
		vertical-align: middle;
		cursor: pointer;
		user-select: none;
		background-image: none;
		border: 1px solid transparent;
	}
	a {
		text-decoration: none;
	}
	.form-control, .single-line {
		background-color: #FFFFFF;
		background-image: none;
		border: 1px solid #e5e6e7;
		border-radius: 1px;
		color: inherit;
		display: block;
		padding: 6px 12px;
		transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
		width: 100%;
		font-size: 14px;
	}
	.input-group {
		position: relative;
		display: table;
		border-collapse: separate;
	}
	.panel-heading {
		padding: 10px 15px;
		border-bottom: 1px solid transparent;
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
	}
	.panel-body {
		padding: 0px 15px 15px 15px;
	}
	.text-danger {
		color: #ed5565;
	}
	/* .table {
		width: 100%;
		max-width: 100%;
		margin-bottom: 20px;
	}
	table {
		background-color: transparent;
	}
	table {
		border-spacing: 0;
		border-collapse: collapse;
	}
	table {
		display: table;
		border-collapse: separate;
		border-spacing: 2px;
		border-color: grey;
	}
	thead {
		display: table-header-group;
		vertical-align: middle;
		border-color: inherit;
	}
	tr {
		display: table-row;
		vertical-align: inherit;
		border-color: inherit;
	}
	table,table tr th, table tr td { border:1px solid #DCDCDC; }
	table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse;} */
	.zengyan{
		display: inline-block;
	    float: left;
	    margin: 0 30px 0 0;
	}
</style>
{/block}
{block name="content"}
<div class="layui-tab layui-tab-brief" lay-filter="demoTitle">
	<div class="layui-body layui-tab-content site-demo site-demo-body" style="top: 0px;left: 0px;">
		<div class="layui-tab-item layui-show">
			<div class="layui-main">
				<div id="LAY_preview">
					<div class="layui-fluid" style="position: relative;margin: 0 auto;padding: 0 0px;">
						<div class="layui-card" style="overflow-y: hidden;">
							<div class="layui-row">
								<div class="layui-col-sm12">
									<div class="ibox float-e-margins">
										<div class="ibox-title">
											<h5>{$title['t1']}</h5>
										</div>
										<div class="ibox-content">
											<div class="layui-row search-form">
												<div class="col-sm-6 m-b-xs zengyan">
													<a href="{$dataurl['time1']}" class='btn btn-info {if condition="$status eq 1"}btn-org{/if}'>今天</a>
													<a href="{$dataurl['timezt']}" class='btn btn-info {if condition="$status eq 2"}btn-org{/if}'>昨天</a>
													<a href="{$dataurl['time7']}" class='btn btn-info {if condition="$status eq 3"}btn-org{/if}'>最近七天</a>
													<a href="{$dataurl['time30']}" class='btn btn-info {if condition="$status eq 4"}btn-org{/if}'>最近30天</a>
													<a href="{$dataurl['timed']}" class='btn btn-info {if condition="$status eq 5"}btn-org{/if}'>本月</a>
												</div>
												<div class="layui-col-sm2">
													<input name="stime" value="{$stime|default=''}" placeholder="开始日期" class="form-control layer-date" id="date1">
												</div>
												<div class="layui-col-sm2">
													<input name="etime" value="{$etime|default=''}" placeholder="结束日期" class="form-control layer-date" id="date2">
												</div>
												<div class="layui-col-sm2">
													<div class="input-group">
														<span class="input-group-btn">
															<button type="button" class="btn btn-sm btn-primary" style="height: 30px;" id="search" url="{:url('allstats?st=6')}">搜索</button>
														</span>
													</div>
												</div>
											</div>
											{if condition="$st eq 1 OR $st eq 2"}
											<table class="table table-striped text-danger">
												<thead class="panel-heading dark">
													<tr>
														<th>日期</th>
														<th>PV</th>
														<th>独立访客</th>
														<th>IP</th>
														<th>人均浏览次数</th>
													</tr>
												</thead>
												<tbody class='text-info'>
													{if condition="$visit"}
													{volist name="visit" id="info"}
													<tr>
														<td>{:time_format($info['stattime'],'Y-m-d')}</td>
														<td>{$info['pv']}</td>
														<td>{$info['alone']}</td>
														<td>{$info['ip']}</td>
														<td>{$info['avg']}</td>
													</tr>
													{/volist}
													<tr>
														<td colspan="5" class="text-center"></td>
													</tr>
													{else/}
													<tr>
														<td colspan="5" class="text-center">aOh! 暂时还没有内容!</td>
													</tr>
													{/if}
												</tbody>
											</table>
											{else /}
											<div id="main" style="height: 300px; width: 100%;"></div>
											{/if}
										</div>
									</div>
								</div>
								<div class="layui-row">
									<div class="layui-col-sm12">
										<header class="panel-heading">
											<font>{$title['t2']}</font>
										</header>
										<div class="panel-body">
											{if condition="$st eq 1 OR $st eq 2"}
											<div id="main" style="height: 300px; width: 100%;"></div>
											{else /}
											<table class="table table-striped text-danger layui-table">
												<thead class="panel-heading dark">
													<tr>
														<th>日期</th>
														<th>PV</th>
														<th>独立访客</th>
														<th>IP</th>
														<th>人均浏览次数</th>
													</tr>
												</thead>
												<tbody class='text-info'>
													{if condition="$visit"}
													{volist name="visit" id="info"}
													<tr>
														<td>{:time_format($info['stattime'],'Y-m-d')}</td>
														<td>{$info['pv']}</td>
														<td>{$info['alone']}</td>
														<td>{$info['ip']}</td>
														<td>{$info['avg']}</td>
													</tr>
													{/volist}
													<tr>
														<td colspan="5" class="text-center"></td>
													</tr>
													{else/}
													<tr>
														<td colspan="5" class="text-center">aOh! 暂时还没有内容!</td>
													</tr>
													{/if}
												</tbody>
											</table>
											{/if}
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
{/block}
{block name="js"}
<script type="text/javascript">
	layui.use(['form','laydate','jquery'], function(){
		var form = layui.form //表单
			,laydate = layui.laydate //日期
			,$ = layui.jquery;
		// 日期
		laydate.render({
			elem: '#date1'
			// ,type: 'datetime'
		});
		laydate.render({
			elem: '#date2'
			// ,type: 'datetime'
		});
	});
</script>
<script src="__STATIC__/addons/stats/echarts/echarts.js" type="text/javascript"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var timeData = <?php echo $edata['dtime'];?>;
    var sumpv = <?php echo $edata['sumpv'];?>;
    var sumip = <?php echo $edata['sumip'];?>;
    var sumal = <?php echo $edata['sumal'];?>;
    var  option = {
    	title: {
    		text: "",
    		x: "left"
    	},
    	tooltip: {
    		trigger: "axis",
    	},
    	legend: {
    		x: 'center',
    		data: ["PV", "IP", "独立访客"]
    	},
    	xAxis: [
    	{
    		type: "category",
    		name: " ",
    		boundaryGap: false,
    		splitLine: {show: false},
    		data: timeData
    	}
    	],
    	yAxis: [
    	{
    		type: "value",
    		name: " ",
    		min: '0'
    	}
    	],
    	toolbox: {
    		show: true,
    		feature: {
    			mark: {
    				show: true
    			},
    			dataView: {
    				show: true,
    				readOnly: true
    			},
    			restore: {
    				show: true
    			},
    			saveAsImage: {
    				show: true
    			}
    		}
    	},
    	calculable: true,
    	series: [
    	{
    		name: "PV",
    		type: "line",
    		smooth:true,
    		data: sumpv

    	},
    	{
    		name: "IP",
    		type: "line",
    		smooth:true,
    		data: sumip

    	},
    	{
    		name: "独立访客",
    		type: "line",
    		smooth:true,
    		data: sumal

    	}
    	]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
{/block}